<!DOCTYPE html>
<html>
<head>
	<title>{$site_name}</title>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <script>/*@cc_on window.location.href="{:url('index/index/browser')}" @*/</script>

	<script type="text/javascript" src="{:_static()}/js/polyfill.min.js"></script>
	<!-- <script src="{:_static()}/cdn/jquery.min.3.2.1.js"></script> -->
	<!-- <script src="{:_static()}/cdn/vue.min.2.5.16.js"></script> -->
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.5.16/vue.min.js"></script>
	{block name="style"}
	<!-- 这里允许在引入一些样式头部 -->
	{/block}
	<!-- 引入样式 -->
	<!-- <link rel="stylesheet" href="{:_static()}/cdn/element-ui.2.4.2.css"> -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.2/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<!-- <script src="{:_static()}/cdn/element-ui.2.4.2.js"></script> -->
	<script src="https://cdn.staticfile.org/element-ui/2.4.2/index.js"></script>
	<!-- <script src="{:_static()}/cdn/tween.16.3.4.js"></script> -->
	<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
	<link rel="stylesheet" href="{:_static()}/css/style.css">
	<script type="text/babel" src="{:_static()}/js/mixins.js"></script>
	<!-- <script src="{:_static()}/cdn/socket.io.2.0.4.js"></script> -->
	<script src="https://cdn.staticfile.org/socket.io/2.0.4/socket.io.slim.js"></script>
	<!-- 引入日历控件 -->
	<link rel="stylesheet" href="{:_static()}/js/jeDate/jedate.css">
	<script src="{:_static()}/js/jeDate/jedate.min.js"></script>

	<!-- 引入图标库 -->
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_750310_fv27z2iaoy.css">

	<!-- 引入自定义VUE组件 -->
	<script type="text/babel" src="{:_static()}/components/clientMsg.js"></script>
	<script type="text/babel" src="{:_static()}/components/wsSession.js"></script>
	<script type="text/babel" src="{:_static()}/components/wsIMs.js"></script>
	<script type="text/babel" src="{:_static()}/components/wsMultiterm.js"></script>

</head>
<body>
<div class="ws-container">
	<div class="ws-left" id="ws-nav" v-show="showLeft" :style="{width:asideWith}">
		<!-- LOGO start -->
		<div class="ws-logo top">
			<!-- logo -->
		</div>
		<!-- LOGO end -->
		
		<!-- 菜单栏 start -->
		<el-menu :default-active="activeIndex" background-color="#495060" text-color="#fff" style="border-right-width: 0">
		  <template v-for="v of nav" v-if="userNavsIds.indexOf(v.id)>=0">

		  <el-submenu :index="v.id" v-if="v.children">
		    <span slot="title">{{v.title}}</span>
		    <el-menu-item :index="c.id" v-for="c of v.children" style="padding: 0px;" v-if="userNavsIds.indexOf(c.id)>=0">
		      <a class="block w100" style="padding-left: 40px;padding-right: 20px;" :href="c.href" slot="title">{{c.title}}</a>
		    </el-menu-item>
		  </el-submenu>

		  <el-menu-item :index="v.id" style="padding: 0px;" v-else>
		    <a class="block w100 p_x20" :href="v.href" slot="title">{{v.title}}</a>
		  </el-menu-item>

		  </template>
		</el-menu>
		<!-- 菜单栏 end -->

		<!-- 客户端信息 start -->
		<client-msg title="客户端信息" v-model="clientMsg" :index.sync="clientMsgIndex" :nums.sync="clientMsgNums" v-if="client_message"></client-msg>
		<!-- 客户端信息 end -->

		<!-- 聊天框 start -->
		<ws-ims 
			:online="online"
			:skey-value="skeyValue"
			:images-prefix="imagesPrefix"
			:busy-device="busyDevice"
			:send-status="sendStatus"
			:append-social="appendSocial"
			:data.sync="wsImData" 
			:unread-ids.sync="unreadIds" 
			:send-url="sendLogsUrl" 
			:upload-url="uploadUrl"
			:toolbar-url="toolbarUrl"
			:logs-url="logsUrl" 
			:rm-social-url="rmSocialUrl"
			:social-url="socialUrl">
		</ws-ims>
		<!-- 聊天框 end -->

	</div>
	<div class="ws-right">
		<!-- 顶部 start -->
		<div class="ws-top top" id="ws-top">
			<el-col :span="3">
			  <el-button @click="showAside" icon="el-icon-menu" type="text" style="font-size: 20px;color: #fff;"></el-button>
			</el-col>

			<el-dropdown placement="bottom" class="f_r">
			  <span class="block" style="color:#fff;cursor: pointer;">
			    {$user.name}
			    <i class="el-icon-arrow-down el-icon--right"></i>
			  </span>
			  <el-dropdown-menu slot="dropdown">
			    <el-dropdown-item>
			    	<span @click="onGet('{:url(\'member/login/logout\')}')">退出</span>
				</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
		</div>
		<!-- 顶部 end -->

		<!-- 右侧内容区域 start -->
		<div class="ws-main">
			{block name="main"}右侧内容区域{/block}
		</div>
		<!-- 右侧内容区域 end -->
	</div>
	
</div>

<script type="text/babel" type="text/javascript">
window.socket = io("{:config('setting.socket_host')}");

socket.on('connect',_=>{
	socket.emit('login',{id:"{$user.id}",login_name:"{$user.login_name}",type:1});
	
});
</script>
<script type="text/babel" type="text/javascript">
window.wsNav=new Vue({
	el:"#ws-nav",
	mixins:[wsMixins],
	data:{
	    aside:200, // 导航宽度
	    nav:{$_navs|stripslashes|raw}, // 菜单
	    activeIndex:{$_navs_id}, // 当前菜单ID
	    userNavsIds:{$_user_navs_ids|raw}, 

	    // 客户端信息提示框
	    client_message:{:config('setting.client_message')},
	    clientMsg:false,
	    clientMsgIndex:0, // 似乎无意义的参数？待定 2018-07-16
	    clientMsgNums:0, //本次更新数量

	    // 接收微信用户信息控件
	    logsUrl:"{:url('member/weixinlogs/logs')}",//获取信息聊天记录接口
	    sendLogsUrl:"{:url('member/weixinlogs/add')}",//发送消息接口
	    socialUrl:"{:url('member/social/read')}",//通过好友ID组获取好友数据
	    toolbarUrl:"{:url('member/weixinlogs/toolbarEmit')}", //工具栏功能请求接口
	    uploadUrl:"{:url('member/media/add')}",
	    rmSocialUrl:"{:url('member/social/del')}",

	    wsImData:{$wsImData|raw}, //聊天组件用户信息
	    unreadIds:{$unreadIds|raw}, //用户好友存在未读信息ID组
	    online:[], // 在线设备[1,2,3]
	    busyDevice:{}, //需要更改忙碌状态的设备{dev_id,is_busy}
	    sendStatus:{}, //需要更改发送状态的信息{soft_id,social_id,id,status}
	    appendSocial:{}, //新增一个好友 {dev_id,soft_id,social}
	    imagesPrefix:"{:images('')}", //媒体文件路径前缀
	    skeyValue:{},
	},
	computed:{
	    asideWith(){
	      	return this.aside.toString()+'px';
	    },
	    showLeft(){
	    	return this.aside>=200;
	    }
	},
	created(){
		this.init();
	},
	methods: {
	    init(){
	    	socket.on('reconnect_error',err=>{
	    		// 重连失败 
	    		this.$notify({
	    	      	title: '提示信息',
	    	      	message: '连接失败，请确保您的Socket服务已经开启，并刷新页面即可!',
	    	      	type: 'warning'
	    	    });
	    	  	socket.close();
	    	});
	    	socket.emit('getUsers',{});
	    	// 在线对象
	    	socket.on('getUsers',data=>{
	    		this.online=data;
	    	})
	    	// 客户端反馈信息（一般为客户端闪退等需要处理）
	    	socket.on('client_msg',data=>{
	    		if(Array.isArray(data)){
	    			updateClientMessage(data);
	    			this.clientMsgIndex++;
	    			this.clientMsgNums=data.length||0;
	    		}
	    	});
	    	
	    	// 载入未读消息数量
	    	socket.on('wx_message',res=>{
    			this.unreadIds=res.data;
	    		console.log('未读消息',res.data)
	    	});
	    	// 接收设备状态更改
	    	socket.on('is_busy_notice',res=>{
	    		let data=res.data;
	    		this.busyDevice={dev_id:data.dev_id,is_busy:data.is_busy};
	    	});
	    	// 接收信息发送状态更改
	    	socket.on('wsmsg_send_status',res=>{
	    		let data=res.data;
	    		console.log(data);
	    		this.sendStatus={soft_id:data.soft_id,social_id:data.social_id,id:data.log_id,status:data.send_status};
	    	});
	    	// 新增一个好友
	    	socket.on('append_social',res=>{
	    		let data=res.data;
	    		this.appendSocial={dev_id:data.dev_id,soft_id:data.soft_id,social:data.social};
	    	});
	    	socket.on('client_setSKey',res=>{
	    		console.log('on.set_skey')
	    		this.skeyValue=res;
	    	});
	    },
	    
	}
});
</script>

<script type="text/babel" type="text/javascript">
window.wsTop=new Vue({
	el:"#ws-top",
	mixins:[wsMixins],
	data:{},
	methods: {
	    showAside(){
	      	let end=wsNav.aside==0?200:0;
	      	this.tween({aside:wsNav.aside},{aside:end},rs=>{
	        	wsNav.aside=rs.aside;
	      	},200);
	    },
	}
});
</script>

{block name="vue"}
<!-- 这里允许在最后插入javaScript代码(仅为方便使用wsNav、wsTop 变量) -->
{/block}
<script type="text/javascript" src="{:_static()}/js/browser.min.js"></script>
</body>
</html>